<include file="public/head" />
</head>
<style>
    .whole{
        margin-bottom:4.9rem;
    }
    .rankingNav{
        padding:0;
        margin:0;
        width:100%;
    }
    .rankingNav li{
        list-style: none;
    }
    .rankingNav li a{
    	color:#8f8f8f;
    }

    .wholeMargin .rankingNav li a{
        padding:0;
        margin:0;
    }
    #can{
        margin:0 auto;
        max-width:100rem;
    }
    .navBox,.ranking{
        margin:0 auto;
        width:95%;
    }
    .same{
        width:33.33333%;
        border:1px solid #CCC;
    }
    .same button{
        outline: none;
    }
    .dif1{
        border-right:0;
        border-top-left-radius:.4rem;
        border-bottom-left-radius: .4rem;  
    }
    .dif3{
        border-left:0;
        border-top-right-radius:.4rem;
        border-bottom-right-radius: .4rem;
    }
    li.active{
        background-color:#F54D23;
        border-color:#F54D23;
    }
    .rankingNav li.active button{
        color:#fff;
    }
    .headimg{
        width:3rem;
        height:3rem;
    }
    .shareHead{
    	background-image:url(__STATIC__/itaoke/mobile/images/sign/background.png);
    	background-repeat: no-repeat;
    	background-size:cover;
    }
   	.headimgH{
   		width:60px;
   		height:60px;
   		border-radius: 0.5rem;
   	}
   	.gold{
   		border:#f2d618 0.2rem solid;
   	}

   	.silver{
   		border:#aaade9 0.2rem solid;
   	}

   	.copper{
   		border:#f5a323 0.2rem solid;
   	}

   	.shareHead ul li a.return{
   		border:1px solid #FFF;
   		color:#FFF;
   		border-radius:.5rem;
   	}

   	.btnNav{
   		border:0;
   		background:transparent;
   		color:#8f8f8f;
   	}

    .clearPM{
        padding:0;
        margin:0;
    }

    .textcolor{
        color:#8f8f8f;
    }
</style>
<body>

<div class="am-modal am-modal-alert" tabindex="-1" id="fq_alert">
  <div class="am-modal-dialog">
    <div class="am-modal-hd" id="fq_alert_title"></div>
    <div class="am-modal-bd" id="fq_alert_info">
    </div>
    <div class="am-modal-footer">
      <span class="am-modal-btn">确定</span>
    </div>
  </div>
</div>

<div class="am-modal am-modal-confirm" tabindex="-1" id="fq_confirm">
  <div class="am-modal-dialog">
    <div class="am-modal-hd" id="fq_confirm_title"></div>
    <div class="am-modal-bd" id="fq_confirm_info"></div>
    <div class="am-modal-footer">
      <span class="am-modal-btn" data-am-modal-confirm="">确定</span>
    </div>
  </div>
</div>


<div id="can">
<div class="whole">
    <header class="am-padding-vertical am-padding-horizontal-sm shareHead">
		<ul class="am-avg-sm-2 ">
            <li style="width:62%;">
                <div class="user_info">
                    <img class="am-fl am-margin-right-xs" src="{:avatar($info['id'], 200)}" style="width: 60px; height: 60px; border-radius: 0.5rem;">
                    <div class="clearPM">
                        <span style="color:#FFF;">{$info.username}</span>
                    </div>
                    <div class="clearPM">
                        <span class="am-text-xs" style="color:#fff;">晒单积分：</span><span class="am-text-xs am-inline-block" style="color:#fff;">{$allscore} 分</span>
                    </div>
                    <div class="clearPM">
                        <span class="am-text-xs" style="color:#fff;">积分排名：</span><span class="am-text-xs am-inline-block" style="color:#fff;">{$myrank} </span>
                    </div>
                </div>
            </li>
            <li class="am-text-right am-padding-top am-fr" style="width:38%;">
                <a class="am-padding-vertical-xs am-padding-horizontal-sm return am-text-sm" href="{:U('Share/index')}">返回晒单广场</a>
            </li>
        </ul>
    </header>

    <div class="am-tab wholeMargin am-margin-horizontal-sm am-margin-top-lg">
        <ul class="rankingNav am-text-center">
            <li class="am-fl same dif1 active">
            	<button type="button" class="am-padding-vertical-sm btnNav am-text-sm">积分排行</button>
            </li>
            <li class="am-fl same dif2">
            	<button type="button" class="am-padding-vertical-sm btnNav am-text-sm">次数排行</button>
            </li>
            <li class="am-fl same dif3">
                <button type="button" class="am-padding-vertical-sm btnNav am-text-sm">月排行</button>
            </li>
        </ul>
    </div>

    <div class="am-cf"></div>

    <div class="ranking am-margin-top-sm am-text-sm">
        <div class="shareScoreBox rankingBox js_box1">
            <ul class="  am-avg-sm-3 am-text-center am-padding-xs ">
                <li>排行</li>
                <li>用户</li>
                <li>积分</li>
            </ul>
            <volist name="ranks" id="vo">
            <ul class="am-avg-sm-3 am-text-center am-padding-xs">
                    <li class="am-vertical-align-middle am-text-sm am-padding-top-xs">{$i}</li>
                    <li>
                        <ul class=" am-avg-sm-2">
                            <li class=" am-text-right am-padding-right-xs">
                                <img src="{:avatar($vo['uid'], 200)}" class=" am-round am-img headimg gold">
                            </li>
                            <li class="am-midd am-vertical-align-middle am-text-left am-text-sm am-padding-top-xs">{:getUsername($vo['uid'])}</li>
                        </ul>
                    </li>
                    <li class="am-vertical-align-middle am-text-sm am-padding-top-xs">{$vo.scores}</li>
                </ul>
 			</volist>

          <!--  <div class="am-text-center am-margin-bottom-sm">
            <span class="js_more1 am-margin-top-xs am-inline-block" data-count="10" data-p="1">点击查看更多</span>            
            </div>-->
        </div>

        <div class="contributeBox am-hide rankingBox js_box2">
            <ul class="  am-avg-sm-3 am-text-center am-padding-xs ">
                <li>排行</li>
                <li>用户</li>
                <li>次数</li>
            </ul>
            <volist name="cranks" id="vo">
            <ul class="am-avg-sm-3 am-text-center am-padding-xs">
                    <li class="am-vertical-align-middle am-text-sm am-padding-top-xs">{$i}</li>
                    <li>
                        <ul class=" am-avg-sm-2">
                            <li class=" am-text-right am-padding-right-xs">
                                <img src="{:avatar($vo['uid'], 200)}" class="am-round am-img headimg gold"></li>
                            <li class="am-midd am-vertical-align-middle am-text-left am-text-sm am-padding-top-xs">{:getUsername($vo['uid'])}</li>
                        </ul>
                    </li>
                    <li class="am-vertical-align-middle am-text-sm am-padding-top-xs">{$vo.count}</li>
                </ul>
			</volist>
        <!--    <div class="am-text-center am-margin-bottom-sm">
            	  <span class="js_more2 am-margin-top-xs am-inline-block" data-count="10" data-p="1">点击查看更多</span>
            </div>-->
        </div>
        
        <div class="contributeBox am-hide rankingBox js_box3">
            <ul class="  am-avg-sm-3 am-text-center am-padding-xs ">
                <li>排行</li>
                <li>用户</li>
                <li>积分</li>
            </ul>
            <volist name="yranks" id="vo">
            <ul class="am-avg-sm-3 am-text-center am-padding-xs">
                    <li class="am-vertical-align-middle am-text-sm am-padding-top-xs">{$i}</li>
                    <li>
                        <ul class=" am-avg-sm-2">
                            <li class=" am-text-right am-padding-right-xs">
                                <img src="{:avatar($vo['uid'], 200)}" class="am-round am-img headimg gold"></li>
                            <li class="am-midd am-vertical-align-middle am-text-left am-text-sm am-padding-top-xs">{:getUsername($vo['uid'])}</li>
                        </ul>
                    </li>
                    <li class="am-vertical-align-middle am-text-sm am-padding-top-xs">{$vo.scores}</li>
                </ul>
			</volist>
         <!--   <div class="am-text-center am-margin-bottom-sm">
                         <span class="js_more3 am-margin-top-xs am-inline-block" data-count="10" data-p="1">点击查看更多</span>
            </div>-->
        </div>
    </div>
</div>

<include file="public/foot" />
<div class="am-hide"></div>
</div>
<script>
    $(function(){
        $('.same').click(function(){
            $('.same').removeClass('active');
            $(this).addClass('active');
            if($(this).hasClass('dif1')){
                $('.rankingBox').addClass('am-hide');
                $('.js_box1').removeClass('am-hide');
            }
            if($(this).hasClass('dif2')){
                $('.rankingBox').addClass('am-hide');
                $('.js_box2').removeClass('am-hide');
            }
            if($(this).hasClass('dif3')){
                $('.rankingBox').addClass('am-hide');
                $('.js_box3').removeClass('am-hide');
            }
        });

        //晒单排行查看更多
        $('.ranking').on('click','.js_more1',function(){
            $(this).text('获取数据中...').prop('disabled',true);
            var count = $(this).attr('data-count');
            if(count < 10){
                $(this).replaceWith('<span class="am-margin-top-xs am-inline-block">没有更多数据了</span>');
                return false;
            }

            var p = $(this).attr('data-p');//当前页码
            var me = $(this);
            $.ajax({
                data:{"p":p},
                dataType:'json',
                type:'post',
                url:'/share/sharepage.html',
                success:function(res){
                    if(res.status == 1){
                        var key,html='';
                        var len = res.list.length;
                        for(var i = 0; i< len ;i++){
                            key = p * 10 + i + 1;
                            html +='<ul class="am-avg-sm-3 am-text-center am-padding-xs"><li class="am-vertical-align-middle am-text-sm am-padding-top-xs">'+key+'</li><li><ul class=" am-avg-sm-2"><li class=" am-text-right am-padding-right-xs"><img src="'+res['list'][i]['headimgurl']+'" class=" am-round am-img headimg" /></li><li class="am-midd am-vertical-align-middle am-text-left am-text-sm am-padding-top-xs">'+res['list'][i]['nickname'].substr(0,1)+'**'+res['list'][i]['nickname'].substr(-1,1)+'</li></ul></li><li class="am-vertical-align-middle am-text-sm am-padding-top-xs">'+res['list'][i]['sharescore']+'</li></ul>';
                        }
                        if(res.check == 1){
                        	$('.selfShare').remove();
                        }
                        me.parent().before(html);
                        me.attr('data-p',res.p).attr('data-count',res.count).text('点击查看更多');
                    }else if(res.status == -1){
                        me.text(res.info);
                    }else{
                        me.replaceWith('<span  class="am-margin-top-xs am-inline-block">'+res.info+'</span>');
                    }
                },
                complete:function(XMLHttpRequest,status){
                    if(XMLHttpRequest.status != 200){
                        me.text('获取失败，点击重试')
                    }
                    me.prop('disabled',false);
                }
            });
        });

        //贡献排行查看更多
        $('.ranking').on('click','.js_more2',function(){
            $(this).text('获取数据中...').prop('disabled',true);
            var count = $(this).attr('data-count');
            if(count < 10){
                $(this).replaceWith('<span class="am-margin-top-xs am-inline-block">没有更多数据了</span>');
                return false;
            }
            var p = $(this).attr('data-p');//当前页码
            var me = $(this);
            $.ajax({
                data:{"p":p},
                dataType:'json',
                type:'post',
                url:'/share/contributepage.html',
                success:function(res){
                    if(res.status == 1){
                        var key,html='';
                        var len = res.list.length;
                        for(var i = 0; i< len ;i++){
                            key = p * 10 + i + 1;
                            if(res['list'][i]['contribute'] == null){
                                res['list'][i]['contribute'] = 0;
                            }
                            html +='<ul class="am-avg-sm-3 am-text-center am-padding-xs"><li class="am-vertical-align-middle am-text-sm am-padding-top-xs">'+key+'</li><li><ul class=" am-avg-sm-2"><li class=" am-text-right am-padding-right-xs"><img src="'+res['list'][i]['headimgurl']+'" class=" am-round am-img headimg" /></li><li class="am-midd am-vertical-align-middle am-text-left am-text-sm am-padding-top-xs">'+res['list'][i]['nickname'].substr(0,1)+'**'+res['list'][i]['nickname'].substr(-1,1)+'</li></ul></li><li class="am-vertical-align-middle am-text-sm am-padding-top-xs">'+res['list'][i]['contribute']+'</li></ul>';
                        }

                        if(res.check == 1){
                        	$('.selfContribute').remove();
                        }
                        me.parent().before(html);
                        me.attr('data-p',res.p).attr('data-count',res.count).text('点击查看更多');
                    }else if(res.status == -1){
                        me.text(res.info);
                    }else{
                        me.replaceWith('<span class="am-margin-top-xs am-inline-block">'+res.info+'</span>');
                    }
                },
                complete:function(XMLHttpRequest,status){
                    if(XMLHttpRequest.status != 200){
                        me.text('获取失败，点击重试')
                    }
                    me.prop('disabled',false);
                }
            });
        });

        //月排行
        $('.ranking').on('click','.js_more3',function(){
            $(this).text('获取数据中...').prop('disabled',true);
            var count = $(this).attr('data-count');
            if(count < 10){
                $(this).replaceWith('<span class="am-margin-top-xs am-inline-block">没有更多数据了</span>');
                return false;
            }
            var p = $(this).attr('data-p');//当前页码
            var me = $(this);
            $.ajax({
                data:{"p":p},
                dataType:'json',
                type:'post',
                url:'/share/monthpage.html',
                success:function(res){
                    if(res.status == 1){
                        var key,html='';
                        var len = res.list.length;
                        for(var i = 0; i< len ;i++){
                            key = p * 10 + i + 1;
                            if(res['list'][i]['total'] == null){
                                res['list'][i]['total'] = 0;
                            }
                            html +='<ul class="am-avg-sm-3 am-text-center am-padding-xs"><li class="am-vertical-align-middle am-text-sm am-padding-top-xs">'+key+'</li><li><ul class=" am-avg-sm-2"><li class=" am-text-right am-padding-right-xs"><img src="'+res['list'][i]['headimgurl']+'" class=" am-round am-img headimg" /></li><li class="am-midd am-vertical-align-middle am-text-left am-text-sm am-padding-top-xs">'+res['list'][i]['nickname'].substr(0,1)+'**'+res['list'][i]['nickname'].substr(-1,1)+'</li></ul></li><li class="am-vertical-align-middle am-text-sm am-padding-top-xs">'+res['list'][i]['total']+'</li></ul>';
                        }

                        if(res.check == 1){
                            $('.selfMonth').remove();
                        }
                        me.parent().before(html);
                        me.attr('data-p',res.p).attr('data-count',res.count).text('点击查看更多');
                    }else if(res.status == -1){
                        me.text(res.info);
                    }else{
                        me.replaceWith('<span class="am-margin-top-xs am-inline-block">'+res.info+'</span>');
                    }
                },
                complete:function(XMLHttpRequest,status){
                    if(XMLHttpRequest.status != 200){
                        me.text('获取失败，点击重试')
                    }
                    me.prop('disabled',false);
                }
            });
        });
    });
</script>
</body>
</html>